/* Copyright (c) 2024 Huawei Technologies Co., Ltd.
openFuyao is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
         http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details. */
import BreadCrumbCom from '@/components/BreadCrumbCom';
import { containerRouterPrefix, ResponseCode, DEFAULT_CURRENT_PAGE, filterServiceStatusList } from '@/common/constants';
import { useHistory, Link } from 'inula-router';
import { useCallback, useEffect, useState } from 'openinula';
import { Input, Space, Button, Dropdown, Table, Popover, ConfigProvider, message, Form } from 'antd';
import { DownOutlined, UpOutlined, MoreOutlined } from '@ant-design/icons';
import useLocalStorage from '@/hooks/useLocalStorage';
import UploadConfigInfoModal from '@/components/UploadConfig';
import { sorterFirstAlphabet, filterServiceStatusValue } from '@/tools/utils';
import DeleteInfoModal from '@/components/DeleteInfoModal';
import zhCN from 'antd/es/locale/zh_CN';
import '@/styles/rayService.less';
import { filterTypeList } from '@/common/constants.js'
import { getServiceList, getClusterList, deleteServiceList, addService, stopServiceList, restartServiceList } from '@/api/rayApi.js';
export default function RayService() {
  const history = useHistory();
  const [serviceForm] = Form.useForm();
  const creator = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')).name : '';
  const [messageApi, contextHolder] = message.useMessage();
  const [currentTheme, setCurrentTheme] = useLocalStorage('theme', 'light');
  const [isShowServiceConfig, setIsShowServiceConfig] = useState(false);
  const [popOpenService, setPopOpenService] = useState(''); // 悬浮框是否展示
  const items = [
    {
      key: '1',
      label: <div onClick={() => goAddConig()}>创建配置</div>,
    },
    {
      key: '2',
      label: <div onClick={() => setIsServiceUpload(true)}>上传配置</div>,
    },
  ];
  const [filterType, setFilterType] = useState();
  const [rayServicePage, setRayServicePage] = useState(DEFAULT_CURRENT_PAGE);
  const [isServiceUpload, setIsServiceUpload] = useState(false);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [filterServiceCreator, setFilterServiceCreator] = useState();
  const [filterCreatorServiceList, setFilterCreatorServiceList] = useState([]);
  const [filterServiceStatus, setFilterServiceStatus] = useState();
  const [originalServiceList, setOriginalServiceList] = useState([]); // 原始数据
  const [rayServiceTableData, setRayServiceTableData] = useState([]);
  const [isServiceDelCheck, setIsServiceDelCheck] = useState(false); // 是否选中
  const [ServiceDelModalOpen, setServiceDelModalOpen] = useState(false);
  const [selectServiceNameList, setSelectServiceNameList] = useState([]);
  const [selectServiceNamespaceList, setSelectServiceNamespaceList] = useState([]);
  const [multipleServiceDeleteList, setMultipleServiceDeleteList] = useState([]);
  const handleRayServiceTableChange = useCallback(
    (
      _pagination,
      filter,
      _sorter,
      extra
    ) => {
      if (extra.action === 'filter') {
        setFilterServiceCreator(filter.create_by);
        setFilterType(filter.template_status);
        setFilterServiceStatus(filter.cluster_status_zhcn);
      }
    },
    []
  );
  const goAddConig = () => {
    history.push('/RayService/addConfig');
  };
  const rayServiceColumns = [
    {
      title: '服务名称',
      dataIndex: 'name',
      sorter: (a, b) => sorterFirstAlphabet(a.name, b.name),
      render: (_, record) => (
        <Space size="middle" >
          <Link style={{ wordBreak: 'break-all' }} to={{ pathname: `/RayService/detail`, state: { name: record.name, namespace: record.namespace, status: record.cluster_status_zhcn } }}>{record.name}</Link>
        </Space>
      ),
    },
    {
      title: '类型',
      dataIndex: 'ray_type',
      filters: filterTypeList,
      filterMultiple: false,
      key: 'template_status',
      filterSearch: true,
      filteredValue: filterType && filterType.length ? filterType : [],
      sorter: (a, b) => sorterFirstAlphabet(a.template_status, b.template_status),
      onFilter: (value, record) => record.template_status.toLowerCase() === value.toLowerCase(),
      render: (_, record) => record.template_status || '-',
    },
    {
      title: '状态',
      dataIndex: 'cluster_status_zhcn',
      filters: filterServiceStatusList,
      filterMultiple: false,
      filteredValue: filterServiceStatus && filterServiceStatus.length ? filterServiceStatus : [],
      sorter: (a, b) => sorterFirstAlphabet(a.cluster_status_zhcn, b.cluster_status_zhcn),
      onFilter: (value, record) => record.cluster_status_zhcn.toLowerCase() === value.toLowerCase(),
      render: (_, record) => (
        <div className='status_content'>
          <p className='status' style={{ background: filterServiceStatusValue(record.cluster_status_zhcn) }} />
          <p className='defaultRayService'>{record.cluster_status_zhcn || '-'}</p>
        </div>
      ),
    },
    {
      dataIndex: 'cluster_ip',
      title: '集群IP地址',
      sorter: (a, b) => sorterFirstAlphabet(a.cluster_ip, b.cluster_ip),
      render: (_, record) => record.cluster_ip || '-',
    },
    {
      title: '创建人',
      dataIndex: 'create_by',
      filters: filterCreatorServiceList,
      filterMultiple: false,
      filterSearch: true,
      filteredValue: filterServiceCreator && filterServiceCreator.length ? filterServiceCreator : [],
      sorter: (a, b) => sorterFirstAlphabet(a.create_by, b.create_by),
      onFilter: (value, record) => record.create_by.toLowerCase() === value.toLowerCase(),
      render: (_, record) => record.create_by || '-',
      key: 'create_by',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      sorter: (a, b) => sorterFirstAlphabet(a.create_time, b.create_time),
      render: (_, record) => record.create_time || '-',
      key: 'defaultRayService',
    },
    {
      title: '更新时间',
      dataIndex: 'update_time',
      sorter: (a, b) => sorterFirstAlphabet(a.update_time, b.update_time),
      render: (_, record) => record.update_time || '-',
      key: 'defaultRayService',
    },
    {
      width: 120,
      key: 'handle',
      title: '操作',
      fixed: 'right',
      render: (_, record) => (
        <Space>
          <Popover className='defaultRayService' placement="bottom" getPopupContainer={() => document.getElementById('rayServiceTable')}
            content={
              <div className="pop_modal">
                <Button type="link" disabled={record.cluster_status_zhcn !== '失败' && record.cluster_status_zhcn !== '未运行'} onClick={() => handleStartService([record])}>启动</Button>
                <Button type="link" disabled={record.cluster_status_zhcn === '未运行'} onClick={() => handleStopService([record])}>终止</Button>
                <Button type="link" disabled={record.cluster_status_zhcn === '运行中'} onClick={() => handleDeleteService([record])}>删除</Button>
              </div>
            }
            trigger="click"
            open={popOpenService === record.key}
            onOpenChange={newOpen => newOpen ? setPopOpenService(record.key) : setPopOpenService('')}>
            <MoreOutlined style={{ color: '#3f66f5' }} className={`common_antd_icon`} />
          </Popover>
        </Space>
      ),
    },
  ];

  const getServiceTable = async (isChange = true) => {
    try {
      const res = await getServiceList();
      if (res.data.code === ResponseCode.OK) {
        if (res.data.data.items) {
          let creatorArr = [];
          let creatorOption = {};
          let _data = res.data.data.items;
          _data.map((item, index) => {
            item.key = index;
            if (!Object.keys(creatorOption).includes(item.create_by)) {
              creatorOption[item.create_by] = item.create_by;
            }
          });
          const creatorKey = Object.keys(creatorOption);
          creatorKey.forEach(item => {
            creatorArr.push({ text: item, value: creatorOption[item] });
          });
          setFilterCreatorServiceList([...creatorArr]);
          setOriginalServiceList(_data);
          handleSearchRayService(_data, isChange); // 先搜索
        } else {
          setRayServiceTableData([]); // 数组为空
        }
      } else {
        let msg = '';
        msg = JSON.stringify(res.data.data) !== '{}' ? `${res.data.msg + ':' + res.data.data}` : res.data.msg;
        messageApi.error(`获取RayService列表失败,${msg}`);
      }
    } catch (error) {
      setRayServiceTableData([]); // 数组为空
      if (error) {
        let msg = '';
        msg = JSON.stringify(error.response.data.data) !== '{}' ? `${error.response.data.msg + ':' + error.response.data.data}` : error.response.data.msg;
        messageApi.error(`获取RayService列表失败,${msg}`);
      }
    }
  };

  // 检索
  const handleSearchRayService = (totalData = originalServiceList, isChange = true) => {
    let temporyList = totalData;
    const serviceFormName = serviceForm.getFieldValue('service_name');
    if (serviceFormName) {
      temporyList = totalData.filter(item => (item.name).toLowerCase().includes(serviceFormName.toLowerCase()));
    } else {
      temporyList = totalData;
    }
    temporyList.map((item, index) => {
      item['key'] = index;
    })
    setRayServiceTableData([...temporyList]);
    if (isChange) {
      setRayServicePage(DEFAULT_CURRENT_PAGE)
    } else {
      setRayServicePage(rayServicePage);
    }
  };
  //终止、删除、启动后重置页面
  const resetServicePage = () => {
    setMultipleServiceDeleteList([]);
    setTimeout(() => {
      getServiceTable();
    }, 1000);
    setSelectedRowKeys();
    setRayServicePage(DEFAULT_CURRENT_PAGE);
    serviceForm.setFieldsValue('service_name', '');
  };

  //启动接口
  const handleStartService = (serviceData) => {
    let startServiceNameList = [];
    let startServiceNamespaceList = [];
    serviceData.map(item => {
      startServiceNameList.push(item.name);
      startServiceNamespaceList.push(item.namespace);
    });
    setSelectServiceNameList(startServiceNameList);
    setSelectServiceNamespaceList(startServiceNamespaceList);
    const serviceStartList = [];
    startServiceNameList.forEach((item, index) => {
      serviceStartList.push(restartServiceList(startServiceNamespaceList[index], item));
      return item;
    });
    Promise.allSettled([serviceStartList]).then(res => {
      res.forEach(res1 => {
        res1.value.forEach((item, index) => {
          item.then((data) => {
            if (data.data.code == ResponseCode.OK) {
              messageApi.success(`${startServiceNameList[index]}启动成功，如果资源状态仍未变化，请稍后手动刷新！`);
            } else {
              let msg = '';
              msg = JSON.stringify(data.data.data) !== '{}' ? `${data.data.msg + ':' + data.data.data}` : data.data.msg;
              messageApi.error(`${startServiceNameList[index]}启动失败,${msg}`);
            }
          }).catch((error) => {
            if (error) {
              let msg = '';
              msg = JSON.stringify(error.response.data.data) !== '{}' ? `${error.response.data.msg + ':' + error.response.data.data}` : error.response.data.msg;
              messageApi.error(`${startServiceNameList[index]}启动失败,${msg}`);
            }
          });
        })
      });
      resetServicePage();
    });
  };

  // 终止接口
  const handleStopService = (serviceData) => {
    let stopServiceNameList = [];
    let stopServiceNamespaceList = [];
    serviceData.map(item => {
      stopServiceNameList.push(item.name);
      stopServiceNamespaceList.push(item.namespace);
    })
    setSelectServiceNameList(stopServiceNameList);
    setSelectServiceNamespaceList(stopServiceNamespaceList);
    const serviceStopList = [];
    stopServiceNameList.forEach((item, index) => {
      serviceStopList.push(stopServiceList(stopServiceNamespaceList[index], item));
      return item;
    });
    Promise.allSettled([serviceStopList]).then(res => {
      res.forEach(res1 => {
        res1.value.forEach((item, index) => {
          item.then((data) => {
            if (data.data.code == ResponseCode.OK) {
              messageApi.success(`${stopServiceNameList[index]}终止成功，如果资源状态仍未变化，请稍后手动刷新！`);
            } else {
              let msg = '';
              msg = JSON.stringify(data.data.data) !== '{}' ? `${data.data.msg + ':' + data.data.data}` : data.data.msg;
              messageApi.error(`${stopServiceNameList[index]}终止失败,${msg}`);
            }
          }).catch((error) => {
            if (error) {
              let msg = '';
              msg = JSON.stringify(error.response.data.data) !== '{}' ? `${error.response.data.msg + ':' + error.response.data.data}` : error.response.data.msg;
              messageApi.error(`${stopServiceNameList[index]}终止失败,${msg}`);
            }
          });
        })
      });
      resetServicePage();
    });
  };
  // 取消删除
  const handleDelServiceCancel = () => {
    setServiceDelModalOpen(false);
    setIsServiceDelCheck(false);
  }
  // 确认删除按钮删除
  const handleServiceCheckFn = (e) => {
    setIsServiceDelCheck(e.target.checked);
  };
  // 打开删除弹窗
  const handleDeleteService = (jobData) => {
    let _deleteNameList = [];
    let _deleteNamespaceList = [];
    jobData.map(item => {
      _deleteNameList.push(item.name);
      _deleteNamespaceList.push(item.namespace);
    })
    setSelectServiceNameList(_deleteNameList);
    setSelectServiceNamespaceList(_deleteNamespaceList);
    setServiceDelModalOpen(true);
  };
  // 删除接口
  const deleteService = async () => {
    const deleterList = []
    selectServiceNameList.map((item, index) => {
      deleterList.push(deleteServiceList(selectServiceNamespaceList[index], item));
    });
    Promise.allSettled([deleterList]).then(res => {
      res.forEach(res1 => {
        res1.value.forEach((item, index) => {
          item.then((data) => {
            if (data.data.code == ResponseCode.OK) {
              messageApi.success(`${selectServiceNameList[index]}删除成功，如果资源状态仍未变化，请稍后手动刷新！`);
            } else {
              let msg = '';
              msg = JSON.stringify(data.data.data) !== '{}' ? `${data.data.msg + ':' + data.data.data}` : data.data.msg;
              messageApi.error(`${selectServiceNameList[index]}删除失败,${msg}`);
            }
          }).catch((error) => {
            if (error) {
              let msg = '';
              msg = JSON.stringify(error.response.data.data) !== '{}' ? `${error.response.data.msg + ':' + error.response.data.data}` : error.response.data.msg;
              messageApi.error(`${selectServiceNameList[index]}删除失败，${msg}！`);
            }
          });
        })
      });
      resetServicePage();
      setTimeout(() => {
        setServiceDelModalOpen(false);
      }, 500);
      setIsServiceDelCheck(false);
    });
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRowKeys);
      setMultipleServiceDeleteList(selectedRows);
    },
  };
  const handleChangeConfig = (open) => {
    // 展示创建下拉菜单
    setIsShowServiceConfig(open);
  };
  const cancelFnUpload = () => {
    // 关闭上传配置弹窗
    setIsServiceUpload(false);
  };
  const getServiceUpload = async (data) => {
    // 获取上传配置文件
    const appFormData = new FormData();
    appFormData.append("config", data);
    appFormData.append("createBy", creator);
    appFormData.append("isStart", true);
    try {
      const res = await addService(appFormData);
      if (res.data.code === ResponseCode.OK) {
        messageApi.success(`创建成功！`);
        setTimeout(() => {
          setIsServiceUpload(false);
        }, 500);
        getServiceTable();
      } else {
        let msg = '';
        msg = JSON.stringify(res.data.data) !== '{}' ? `${res.data.msg + ':' + res.data.data}` : res.data.msg;
        messageApi.error(`创建失败,${msg}`);
      }
    } catch (error) {
      if (error) {
        let msg = '';
        msg = JSON.stringify(error.response.data.data) !== '{}' ? `${error.response.data.msg + ':' + error.response.data.data}` : error.response.data.msg;
        messageApi.error(`创建失败,${msg}！`);
      }
    }
  };
  useEffect(() => {
    getServiceTable();
  }, []);
  useEffect(() => {
  }, [currentTheme]);
  return <div className="child_content">
    <BreadCrumbCom className="create_bread" items={[
      { title: 'openFuyao Ray', disabled: true },
      { title: 'RayService', path: `/RayService` },
    ]} />
    {contextHolder}
    <div className="service_content">
      <div className="service_table">
        <div className="service_table_top">
          <Form form={serviceForm}>
            <Form.Item name="service_name">
              <Input.Search placeholder="请输入名称" onSearch={() => handleSearchRayService()} autoComplete="off" style={{ width: 200 }} />
            </Form.Item>
          </Form>
          <div>
            <Dropdown
              menu={{ items }}
              open={isShowServiceConfig}
              onOpenChange={handleChangeConfig}
              placement="bottom"
            >
              <Button className='primary_btn'>创建{isShowServiceConfig ? <UpOutlined /> : <DownOutlined />} </Button>
            </Dropdown>
            <Button className='cancel_btn ml16' disabled={!multipleServiceDeleteList.length} onClick={() => handleStartService(multipleServiceDeleteList)}>启动</Button>
            <Button className='cancel_btn ml16' disabled={!multipleServiceDeleteList.length} onClick={() => handleStopService(multipleServiceDeleteList)}>终止</Button>
            <Button className='cancel_btn ml16' disabled={!multipleServiceDeleteList.length} onClick={() => handleDeleteService(multipleServiceDeleteList)}>删除</Button>
          </div>
        </div>
        <ConfigProvider locale={zhCN}>
          <Table
            style={{ overflow: 'scroll' }}
            id='rayServiceTable'
            rowSelection={rowSelection}
            columns={rayServiceColumns}
            dataSource={rayServiceTableData}
            onChange={handleRayServiceTableChange}
            pagination={{
              className: 'page',
              current: rayServicePage,
              showTotal: (total) => `共${total}条`,
              showSizeChanger: true,
              showQuickJumper: true,
              pageSizeOptions: [10, 20, 50],
              onChange: page => setRayServicePage(page),
            }}
          />
        </ConfigProvider>
      </div>
    </div>
    <DeleteInfoModal
      title="删除RayService"
      open={ServiceDelModalOpen}
      cancelFn={handleDelServiceCancel}
      content={[
        '删除RayService后将无法恢复，请谨慎操作。',
        `确定删除RayService下${selectServiceNameList[0]}${selectServiceNameList.length > 1 ? '等多条数据' : ''} 吗？`,
      ]}
      showCheck={true}
      isCheck={isServiceDelCheck}
      checkFn={handleServiceCheckFn}
      confirmFn={deleteService} />
    <UploadConfigInfoModal
      open={isServiceUpload}
      downloadType={'rayservice'}
      title={'上传配置'}
      cancelText={'取消'}
      cancelFn={cancelFnUpload}
      confirmText={'上传并部署'}
      uploadText={'选择文件'}
      downloadText={'下载RayService模版'}
      uploadtip={'文件最大限制1M，支持上传yaml格式。'}
      size={1}
      type={'yaml'}
      propsServiceUpload={getServiceUpload}
    />
  </div>;
}